<template>
	<view class="wrap">
		<view v-if="result.length>0" class="box u-p-20" style="background:#fff" v-for="(item,index) in result" :key="item">
			<view class="u-p-b-20">
				<span class="u-font-13 u-p-r-30">{{item.gainData.substring(0,10)}} 获取能量</span>
				<span class="u-font-13" style="color: #488EF5">{{item.energy}}g</span>
			</view>
			<view style="background: #FBFBFB;">
				<u-collapse :accordion="false">
					<u-collapse-item @change="changeTop" :index="index" :open="item.gainOpen" class="u-p-20">
						<view slot="title" style="width:100%;">
							<view style="float:left;">
								<span class="dot u-m-r-30" style="background:#3D9E6A;"></span>
								<span class="total">共收取能量</span>
								<span style="color:#3D9E6A">{{item.gainEnergy}}g</span>
							</view>
							<!-- <view style="float:right;color:#999">
								<span v-if="item.gainOpen">收起</span>
								<span v-else>展开</span>
							</view> -->
						</view>
						<view class="u-m-t-10 u-m-b-20" style="border-top:1px solid #eee;"></view>
						<scroll-view scroll-y class="collapse-item u-p-b-20">
							<u-row class="u-p-t-10 u-p-b-10 u-font-13" v-for="(Item,idx) in item.gainEnergyList" :key="item">
								<u-col span="4" class="name u-line-1">{{Item.personName}}</u-col>
								<u-col span="3" class="number u-line-1">{{Item.gainEnergy}}g</u-col>
								<u-col span="5" text-align="right" class="time u-line-1 u-p-r-20">{{Item.createTime}}</u-col>
							</u-row>
						</scroll-view>
					</u-collapse-item>
					<view style="width:100%;height:16px;background:#fff;"></view>
					<u-collapse-item :index="index" @change="changeTops" :open="item.collecteOpen" class="u-p-20">
						<view slot="title" style="width:100%;">
							<view style="float:left;">
								<span class="dot u-m-r-30" style="background:#488EF5;"></span>
								<span class="total">被人收取能量</span>
								<span style="color:#488EF5">{{item.collectedEnergy}}g</span>
							</view>
							<!-- <view style="float:right;color:#999">
								<span v-if="item.collecteOpen">收起</span>
								<span v-else>展开</span>
							</view> -->
						</view>
						<view class="u-m-t-10 u-m-b-20" style="border-top:1px solid #eee;"></view>
						<view class="collapse-item u-p-b-20">
							<u-row class="u-p-t-10 u-p-b-10 u-font-13" v-for="(Item,ix) in item.collectedEnergyList" :key="item">
								<u-col span="2" class="time u-line-1">{{Item.createTime}}</u-col>
								<u-col span="3" class="name u-line-1">{{Item.gainPersonName}}</u-col>
								<u-col span="2" class="number u-line-1">{{Item.gainEnergy}}g</u-col>
								<u-col span="5" text-align="right" class="number u-line-1 u-p-r-30">
									<u-tag v-if="Item.isSteal == 0" @click="goDetail(Item)" style="background:#488EF5;height:20px;line-height:6px;" type="primary" color="#fff" text="收取TA"
									 shape="circle" />
									<u-tag v-else style="background:#ccc;height:20px;line-height:6px;" type="primary" color="#fff" text="收取TA"
									 shape="circle" />
								</u-col>

							</u-row>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>
		<view v-if="result.length===0" class="u-text-center">暂无数据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				today: false,
				result: []
			}
		},
		onShow () {
			this.$u.api.gainEnergyDetail().then(res => {
				// res.list.map(value => {
				// 	value.gainOpen = false
				// 	value.collecteOpen = false
				// })
				
				this.result = res.list
			}).catch(res => {
				this.$u.toast(res.msg)
			})
		},
		methods: {
			changeTop(val) {
			},
			changeTops (val) {
			},
			goDetail (row) {
				console.log(row)
				this.$u.route({
					url: 'pages/work/apply/loveforest/personal_garden/other_garden/other_garden',
					params: {
						userId: row.gainPersonId,
						userName: row.gainPersonName
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
		// padding: 30px 20px 30px 20px;
	}
	.wrap {
		padding: 30px 20px 30px 20px;
		
	}
	.box:nth-child(2) {
		margin-top:30rpx;
	}
	.dot {
		width: 8px;
		height: 8px;
		border-radius: 50%;
		display: inline-block;
		position: relative;
		top: -2px;
	}
	.total {
		font-weight: bold;
		font-size: 15px;
	}
	.collapse-item {
		max-height: 200px;
		overflow: auto;

		.name {
			color: #666666;
		}

		.number {
			color: #000;
		}

		.time {
			color: #999999;
		}
	}
</style>
